<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul {
            list-style: none;
        }

        a {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            height: 44px;
            text-decoration: none;
            color: #333;
            font-size: 8px;
        }

        img {
            vertical-align: middle;
            width: 22px;
            height: 22px;
        }

        .nav {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 54px;
            background-color: skyblue;
        }

        ul {
            width: 100%;
            height: 54px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        li {
            display: inline-block;
            width: 44px;
            height: 44px;
            /* background-color: pink; */
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li>
                <a href="javascript:">
                    <img src="首页.png" alt="" class="display" style="display: block;">
                    <img src="1.png" alt="" class="none" style="display: none;">
                    <div>首页</div>
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <img src="分类.png" alt="" class="display" style="display: block;">
                    <img src="2.png" alt="" class="none" style="display: none;">
                    <div>分类</div>
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <img src="社区.png" alt="" class="display" style="display: block;">
                    <img src="3.png" alt="" class="none" style="display: none;">
                    <div>社区</div>
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <img src="购物车.png" alt="" class="display" style="display: block;">
                    <img src="4.png" alt="" class="none" style="display: none;">
                    <div>购物车</div>
                </a>
            </li>
            <li>
                <a href="javascript:">
                    <img src="我的.png" alt="" class="display" style="display: block;">
                    <img src="5.png" alt="" class="none" style="display: none;">
                    <div>我的</div>
                </a>
            </li>
        </ul>
    </div>
    <script>
        var a = document.querySelector('.nav').querySelectorAll('a');
        var imgs_noclick = document.getElementsByClassName('display');
        var imgs_click = document.getElementsByClassName('none');
        for (var i = 0; i <= a.length - 1; i++) {
            imgs_noclick[i].setAttribute('index', i);
            imgs_click[i].setAttribute('index', i);
            a[i].onclick = function () {
                for (var j = 0; j <= a.length - 1; j++) {
                    a[j].style.color = '#333';
                }
                this.style.color = 'orange';
                var index_noclick = this.querySelector('.display').getAttribute('index');
                var index_click = this.querySelector('.none').getAttribute('index');
                for (var j = 0; j < imgs_click.length; j++) {
                    imgs_click[j].style = 'display: none';
                    imgs_noclick[j].style = 'display: display';
                }
                imgs_click[index_click].style = 'display: display';
                imgs_noclick[index_noclick].style = 'display: none';
            }
        }
    </script>
</body>

</html>